<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-27 16:37:34
 * @LastEditors: your name
 * @LastEditTime: 2021-09-13 11:03:27
 * @Description: file content
-->
<template>
  <div>
    <div class="ks-row-middle mb20 lh1">
      <div class="mr10 g3">默认排序</div>
      <i
        class="el-icon-circle-plus-outline iconcolor f20 poi"
        @click="handleAdd"
      ></i>
    </div>
    <ElTableDraggable>
      <el-table
        :data="showOrder"
        style="width: 100%"
        :row-key="getRow"
        v-show="showOrder.length > 0"
      >
        <el-table-column prop="name" label="数据字段"> </el-table-column>
        <el-table-column prop="showfieldOrder" label="排序规则">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              class="iconfont iconbianji mr10 poi"
              @click="handleEdit(scope.row)"
            ></span>
            <template>
              <el-popconfirm
                title="确定删除该默认排序配置吗？"
                @confirm="handleDelete(scope.row)"
              >
                <span
                  slot="reference"
                  class="iconfont iconicon_shanchu poi"
                ></span>
              </el-popconfirm>
            </template>
            <i class="el-icon-rank ml10 poi f16"></i>
          </template>
        </el-table-column>
      </el-table>
    </ElTableDraggable>
  </div>
</template>

<script>
import tableDefaultOrderModal from "./addModal";
import basicmixins from "../basicmixins";
import vuedraggable from "vuedraggable";
import ElTableDraggable from "el-table-draggable";

const ORDER_TEXT = {
  asc: "升序",
  desc: "降序",
};
export default {
  mixins: [basicmixins],

  components: { vuedraggable, ElTableDraggable },
  props: {},

  data() {
    return {
      ORDER_TEXT,
      drag: false,
      showOrder: [],
    };
  },
  mounted() {
    this.getShowOrder();
    // 初始化
    const defaultRuleSort = this.value.__config.defaultRuleSort;
    if (defaultRuleSort && defaultRuleSort.length !== 0) {
      let _data = [];
      defaultRuleSort.forEach((item) => {
        const code = item;
        this.showOrder.forEach((_item) => {
          if (_item.code === code) {
            _data.push(_item);
          }
        });
      });
      this.showOrder = _data;
    }
  },
  watch: {
    showOrder: {
      handler(val) {
        if (val.length !== 0) {
          const data = val.map((item) => {
            return item.code;
          });
          this.$set(this.value.__config, "defaultRuleSort", data);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    columnList() {
      return this.value.__config.getEntitymodelList;
    },
    list() {
      const data = this.columnList.map((item) => {
        const _item = {
          code: item.code,
          name: item.name,
          disabled: false,
        };
        if (item.fieldOrderRule) {
          _item.disabled = true;
        }
        return _item;
      });
      return data;
    },
  },

  methods: {
    getRow(row) {
      return row.code;
    },
    getShowOrder() {
      const data = this.columnList
        .filter((item) => {
          return item.fieldOrderRule;
        })
        ?.map((item) => {
          return {
            code: item.code,
            name: item.name,
            fieldOrderRule: item.fieldOrderRule,
            showfieldOrder: this.ORDER_TEXT[item.fieldOrderRule],
          };
        });
      this.showOrder = data;
    },
    handleAdd() {
      tableDefaultOrderModal.init({
        fields: this.list,
        onConfirm: (data) => {
          this.columnList.forEach((item) => {
            if (item.code === data.fieldCode) {
              this.$set(item, "fieldOrderRule", data.orderRule);
            }
          });
          this.getShowOrder();
        },
      });
    },

    handleEdit(record) {
      const data = {
        fieldCode: record.code,
        orderRule: record.fieldOrderRule,
      };
      tableDefaultOrderModal.init({
        fields: this.list,
        data,
        onConfirm: (data) => {
          this.columnList.forEach((item) => {
            if (
              data.fieldCode === record.code &&
              data.fieldCode === item.code
            ) {
              this.$set(item, "fieldOrderRule", data.orderRule);
            }
            if (data.fieldCode !== record.code) {
              if (item.code === record.code) {
                this.$set(item, "fieldOrderRule", "");
              }
              if (item.code === data.fieldCode) {
                this.$set(item, "fieldOrderRule", data.orderRule);
              }
            }
          });
          this.getShowOrder();
        },
      });
    },

    handleDelete(record) {
      this.columnList.forEach((item) => {
        if (record.code === item.code) {
          this.$set(item, "fieldOrderRule", "");
        }
      });
      this.getShowOrder();
    },
  },
};
</script>
